<template>
  <!-- 组件模板部分，这里可以编写 HTML 结构 -->
  <div>
    <h1>Token 管理页面</h1>
    <!-- <input v-model="newToken" placeholder="输入新的 token"> -->
    <el-input v-model="newToken" placeholder="输入新的 token" style="width: 300px;"></el-input>
    <el-button type="primary" @click="handleSetToken">设置 Token</el-button>
    <el-button type="primary" @click="handleClearToken">清除 Token</el-button>
    <el-button type="primary" @click="handleUpdateToken">更新 Token</el-button>
    <el-button type="primary" @click="handleValidateToken">验证 Token</el-button>
    <el-button type="primary" @click="handleGenerateUUID">生成token</el-button>
    <p>当前 Token: {{ userStore.getToken }}</p>
    <p>是否有 Token: {{ userStore.hasToken }}</p>
  </div>
</template>

<script>
import { useUserStore } from '../store/user';

export default {
  // 组件的名称，使用当前文件名（不含扩展名）作为默认名称
  name: 'UserDemo',
  // data 函数用于定义组件的响应式数据
  data() {
    return {
      // 示例数据，可根据实际需求修改
      message: '这是一条示例消息',
      newToken: '',
      userStore: useUserStore(),
    };
  },
  // computed 用于定义计算属性，计算属性会根据依赖的数据自动更新
  // 这里目前为空，你可以按需添加新的计算属性
  computed: {},
  // methods 用于定义组件的方法
  methods: {
    handleSetToken() {
      if (this.newToken) {
        this.userStore.setToken(this.newToken);
        this.newToken = '';
      }
    },
    handleClearToken() {
      this.userStore.clearToken();
    },
    handleUpdateToken() {
      if (this.newToken) {
        const updatedToken = this.userStore.updateToken(this.newToken);
        if (updatedToken) {
          console.log('Token 更新为:', updatedToken);
        }
        this.newToken = '';
      }
    },
    handleValidateToken() {
      const isValid = this.userStore.validateToken();
      console.log('Token 是否有效:', isValid);
    },

    handleGenerateUUID() {
      this.newToken = this.generateUUID();
    },
    // 生成uuid 去掉-
    generateUUID() {
      return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
        const r = Math.random() * 16 | 0;
        const v = c === 'x' ? r : (r & 0x3 | 0x8);
        return v.toString(16);
      }).replace(/-/g, '');
    }
  },
  // created 钩子在实例初始化之后，数据观测和 event/watcher 事件配置之前被调用
  // 适合进行一些不需要访问 DOM 或数据已经准备好的初始化操作，如数据的预获取
  created() {
    // 这里可以添加初始化逻辑，例如发起异步请求等
  },
  // 常用生命周期钩子
  // beforeMount 在组件挂载到 DOM 之前调用，此时模板编译已完成，但 DOM 元素还未插入到页面中
  // 可用于进行一些初始化操作，如设置定时器、发起异步请求等
  beforeMount() {
    // 这里可以添加在挂载前执行的逻辑
  },
  // mounted 在组件已经挂载到 DOM 上后调用，此时可以访问到 DOM 元素
  // 适合进行依赖于 DOM 的操作，如获取元素尺寸、绑定事件监听器等
  mounted() {
    // 这里可以添加依赖 DOM 的操作逻辑
  },
  // beforeUpdate 在组件更新之前调用，当响应式数据发生变化，虚拟 DOM 重新渲染之前触发
  // 可用于在更新前保存一些数据状态
  beforeUpdate() {
    // 这里可以添加在更新前执行的逻辑
  },
  // updated 在组件更新完成后调用，此时虚拟 DOM 已经重新渲染并更新到实际 DOM 中
  // 可用于在更新后进行一些操作，如访问更新后的 DOM 元素
  updated() {
    // 这里可以添加在更新后执行的逻辑
  },
  // beforeUnmount 在组件卸载之前调用，此时组件实例仍然完全正常
  // 可用于清理一些副作用，如清除定时器、解绑事件监听器等
  beforeUnmount() {
    // 这里可以添加卸载前的清理逻辑
  },
  // unmounted 在组件已经完全卸载后调用，所有的事件监听器和子实例都已经被销毁
  // 通常用于执行一些最终的清理工作
  unmounted() {
    // 这里可以添加最终的清理逻辑
  },

  // 不常用生命周期钩子
  // activated 当使用 <keep-alive> 包裹组件时，组件被激活时调用
  // 可用于在组件被激活时恢复状态或执行一些初始化操作
  activated() {
    // 这里可以添加组件激活时的逻辑
  },
  // deactivated 当使用 <keep-alive> 包裹组件时，组件被停用时调用
  // 可用于在组件被停用时保存状态或执行一些清理操作
  deactivated() {
    // 这里可以添加组件停用的逻辑
  },
  // errorCaptured 当捕获到子孙组件抛出的错误时调用
  // 可用于统一处理组件树中的错误，避免错误导致整个应用崩溃
  // 返回 false 可以阻止错误继续向上传播
  errorCaptured(err, instance, info) {
    onsole.error('捕获到错误:', err, instance, info);
    // 这里可以添加错误处理逻辑
    return false; // 阻止错误向上传播
  },
  // renderTracked 当组件渲染过程中进行依赖跟踪时调用，每个响应式依赖被跟踪时触发
  // 可用于调试，了解组件渲染时的依赖关系
  renderTracked(event) {
    // 这里可以添加调试相关逻辑
  },
  // renderTriggered 当组件渲染过程中依赖的响应式数据发生变化，触发重新渲染时调用
  // 可用于调试，了解组件重新渲染的触发原因
  renderTriggered(event) {
    // 这里可以添加调试相关逻辑
  }
};
</script>

<style scoped>
/* 这里可添加自定义样式，scoped 表示样式只作用于当前组件 */
h1 {
  color: #333;
}

input {
  margin: 5px;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

button {
  margin: 5px;
  padding: 8px 16px;
  background-color: #409eff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
</style>